<template>
  <el-row class="demo-avatar demo-basic">
    <el-col :span="24" class="avatar-container">
      <!-- 显示当前头像 -->
      <el-avatar
        :size="100"
        :src="avatarUrl" 
        style="cursor: pointer;"
        @click="showAvatarOptions">
      </el-avatar>

      <!-- 显示用户 ID -->
      <p class="user-name">用户名: {{ userName }}</p>
	  
	  <div class="list-box">
		
	  	<el-button link type="primary" size="small" @click="handleUpdate(userName)">
	  	  <el-icon>
	  	    <EditPen />
	  	  </el-icon> 修改个人信息
	  	</el-button>
	  	<el-button link type="primary" size="small" @click="handleDelete(userName)">
	  	  <el-icon>
	  	    <Delete />
	  	  </el-icon> 注销用户
	  	</el-button>
		
	  	<!-- 对话框 -->
	  	<el-dialog v-model="showDialog" :title="dialogTitle" width="500">
	  		<component :is="showComp" v-if="showComp" :userName="showUserName" @refreshEvent="handleRefresh"></component>
	  	</el-dialog>
	  </div>
	
      <!-- 头像选择按钮 -->
      <div class="avatar-buttons">
        <el-button 
          v-for="(option, index) in avatarOptions" 
          :key="index" 
          @click="chooseAvatar(option)" 
          size="mini">
          头像 {{ index + 1 }}
        </el-button>
      </div>
	  
	  

      <!-- 头像选择对话框 -->
      <el-dialog title="选择头像" :visible.sync="dialogVisible">
        <div class="avatar-options">
          <el-avatar
            v-for="(option, index) in avatarOptions"
            :key="index"
            :src="option"
            class="avatar-option"
            @click="chooseAvatar(option)">
          </el-avatar>
        </div>
      </el-dialog>
    </el-col>
  </el-row>
  
  <div>
    <h2>选择背景颜色</h2>
    <el-tree-select
      v-model="backgroundValue"
      :data="backgroundData"
      :render-after-expand="false"
      style="width: 240px"
      @change="changeBackground"
    />
  
    <h2>选择字体样式</h2>
    <el-tree-select
      v-model="fontValue"
      :data="fontData"
      :render-after-expand="false"
      style="width: 240px"
      @change="changeFont"
    />
  
    <div class="bg-upload">
      <el-upload
        class="avatar-uploader"
        :action="''"
        :show-file-list="false"
        @change="handleBgUpload"
      >
        <img v-if="backgroundImage" :src="backgroundImage" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { inject, ref } from 'vue';

// 注入背景样式和字体样式
const backgroundStyle = inject('backgroundStyle');
const fontStyle = inject('fontStyle');

// 定义树选择数据
const backgroundData = [
  {
    value: 'light-mode',
    label: '亮色模式',
  },
  {
    value: 'dark-mode',
    label: '暗色模式',
  },
  {
    value: 'blue-mode',
    label: '蓝色模式',
  },
];

const fontData = [
  {
    value: 'default-font',
    label: '默认字体',
  },
  {
    value: 'serif-font',
    label: '衬线字体',
  },
  {
    value: 'sans-serif-font',
    label: '无衬线字体',
  },
];

// 初始化选择值
const backgroundValue = ref('');
const fontValue = ref('');

// 修改背景样式的方法
const changeBackground = (value) => {
  if (backgroundStyle) {
    backgroundStyle.value = value;
  }
};

// 修改字体样式的方法
const changeFont = (value) => {
  if (fontStyle) {
    fontStyle.value = value;
  }
};

const dialogVisible = ref(false)
const avatarUrl = ref("https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png")

let userName = ref(localStorage.getItem('user_name'))

import avatar1 from '@/assets/images/login-bg1.jpg';
import avatar2 from '@/assets/images/login-bg2.jpg';
import avatar3 from '@/assets/images/login-bg3.jpg';
import avatar4 from '@/assets/images/login-bg4.jpg';

const avatarOptions = [avatar1, avatar2, avatar3, avatar4];

const showAvatarOptions = () => {
  dialogVisible.value = true
}

const chooseAvatar = (avatar) => {
  avatarUrl.value = avatar
  dialogVisible.value = false
}


import {
		ElTable,
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		onMounted,
	} from 'vue'
	import axios from 'axios'

	import {
		useRouter
	} from 'vue-router'

	// 导入新增或者修改组件
	import UserEdit from './edit.vue'
	// 路由实例对象
	const router = useRouter()

	// 初始化弹窗
	const showDialog = ref(false)
	// 弹窗标题
	const dialogTitle = ref('')
	// 动态切换组件
	const showComp = ref(null)
	// 传递的userId参数
	const showUserName = ref(null)

	// 初始化用户列表数据
	const userList = ref([])
	// 监听挂载成功的回调函数
	onMounted(() => {
		getUserData()
	})

	// 封装一个方法 用于获取用户列表数据
	const getUserData = () => {
		axios.get('/api/script/user/list').then(res => {
			if (res.data.code == 200) {
				userList.value = res.data.data
			} else {
				userList.value = []
			}
		}).catch(err => {})
	}
	// 监听点击修改按钮时 执行的方法
	const handleUpdate = (userName) => {
		showDialog.value = true
		dialogTitle.value = '修改个人信息'
		showComp.value = UserEdit
		showUserName.value = userName
	}
	// 监听点击删除按钮时 执行的方法
	const handleDelete = (userName) => {
	  ElMessageBox.confirm(
	    '确认要删除选中的用户信息吗?',
	    '提示信息', {
	      confirmButtonText: '是',
	      cancelButtonText: '否',
	      type: 'warning',
	    }
	  )
	  .then(() => {
	    axios.delete('/api/script/user/name/' + userName).then(res => {
	      if (res.data.code == 200) {
	        ElMessage({
	          message: '删除成功',
	          type: 'success'
	        });
	        getUserData(); // 更新用户数据
	        router.push('../'); // 跳转到登录页面
	      } else {
	        ElMessage({
	          message: '删除失败',
	          type: 'error'
	        });
	      }
	    }).catch(err => {});
	  });
	}
	
	// 监听修改子组件回调刷新 
	const handleRefresh = (newUserName) => {
		showDialog.value = false
		showUserName.value = null
		// 刷新用户信息列表
		getUserData()
		userName=ref(newUserName)
	}
</script>

<style scoped>
.default-font {
  font-family: Arial, sans-serif;
}

.serif-font {
  font-family: "Times New Roman", Times, serif;
}

.sans-serif-font {
  font-family: "Helvetica", sans-serif;
}
.avatar-container {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  height: 100vh; 
}
.avatar-buttons {
  margin-top: 20px; 
  display: flex; 
  justify-content: center; 
}
.avatar-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
}
.avatar-option {
  margin: 10px;
  cursor: pointer; 
}
.user-name {
  margin-top: 10px; /* 头像与用户 ID 之间的间距 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
}
</style>